import { Button, NavBar } from 'antd-mobile'
import React from 'react'
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { time } from '../../store/counter/counterSlice'
import { useDispatch } from 'react-redux'

function Detail() {
    const navigate = useNavigate()
    const dispatch = useDispatch()

    const counterSlice = useSelector((state) => state.counterSlice)

    console.log(counterSlice)
    return (
        <div>
            <NavBar onBack={() => {
                navigate(-1)
            }}>G107</NavBar>

            <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                <span onClick={() => {
                    dispatch(time('2022-09-00'))
                }}>前一天</span>
                <span>{counterSlice.date} 周五</span>
                <span onClick={() => {
                    // 点击后一天 date 的时间加一天
                    dispatch(time('2022-09-01'))
                }}>后一天</span>
            </div>

            <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <div>
                    <p>{counterSlice.start}</p>
                    <p>03:33</p>
                    <p>9.13周五</p>
                </div>
                <div>
                    <p>G107</p>
                    <p>—— 时刻表 ——</p>
                    <p>耗时5时47分</p>
                </div>
                <div>
                    <p>{counterSlice.end}</p>
                    <p>13:33</p>
                    <p>9.01周五</p>
                </div>
            </div>

            <div >
                <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                    <div>
                        <span>二等座</span>
                        <span>￥ 443.5</span>
                    </div>
                    <div>
                        <span>有票</span>
                        <Button>收起</Button>
                    </div>

                </div>
                <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                    <div>
                        <span>二等座</span>
                        <span>￥ 443.5</span>
                    </div>
                    <div>
                        <span>有票</span>
                        <Button>收起</Button>
                    </div>

                </div>
                <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                    <div>
                        <span>二等座</span>
                        <span>￥ 443.5</span>
                    </div>
                    <div>
                        <span>有票</span>
                        <Button>收起</Button>
                    </div>

                </div>
            </div>
        </div>
    )
}

export default Detail